<template>
  <div>
    <!--搜索-->
    <el-row>
      <el-col :span="24">
        <div class="search">
          <el-form :inline="true" :model="searchData">
            <el-form-item class="text" label="用户编号">
              <el-input
                  placeholder="请输入用户编号"
                  v-model="searchData.input1"
                  size="small"
                  clearable>
              </el-input>
            </el-form-item>
            <el-form-item class="text" label="用户名称">
              <el-input
                  placeholder="请输入用户名称"
                  v-model="searchData.input2"
                  size="small"
                  clearable>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-search" size="mini" type="primary" @click="onSubmit">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="onReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <!--工具栏-->
    <el-row>
      <el-col :span="24">
        <div class="tools">
          <el-button @click="handleAdd" size="mini" icon="el-icon-plus" type="primary">新增</el-button>
          <el-button :loading="false" :disabled="true" size="mini" icon="el-icon-edit" type="success">修改</el-button>
          <el-button :loading="false" :disabled="false" size="mini" icon="el-icon-delete" type="danger">删除</el-button>
          <el-button :loading="true" :disabled="false" size="mini" icon="el-icon-download" type="warning">导出</el-button>
          <el-button :loading="false" :disabled="false" size="mini" icon="el-icon-refresh" @click="refresh">刷新
          </el-button>
        </div>
      </el-col>
    </el-row>
    <!--表格-->
    <el-row>
      <el-col :span="24">
        <div style="width: auto;">
          <el-table
              :data="tableData"
              stripe
              style="width: 100%;">
            <el-table-column
                type="selection"
                align="center"
                width="55">
            </el-table-column>
            <el-table-column
                prop="id"
                label="用户编号"
                width="180">
            </el-table-column>
            <el-table-column
                prop="name"
                label="用户姓名"
                width="180">
            </el-table-column>
            <el-table-column
                prop="address"
                label="地址">
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="handleEdit(scope.$index, scope.row)">编辑
                </el-button>
                <el-button
                    size="mini"
                    type="text"

                    icon="el-icon-delete"
                    @click="handleDelete(scope.$index, scope.row)">删除
                </el-button>
                &nbsp;
                <el-dropdown size="mini">
                  <el-button
                      size="mini"
                      type="text"
                  >更多<i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item><i class="el-icon-key"></i>重置密码</el-dropdown-item>
                    <el-dropdown-item><i class="el-icon-chat-dot-round"></i>立即联系</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
          <div style="margin-top: 15px;text-align: right;">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10,20,50,100, 200, 300, 400]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="3000">
            </el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>



    <el-dialog
        title="新增"
        :visible.sync="addDialogVisible"
        width="50%">
      <el-form :inline="true" :model="searchData">
        <el-form-item class="text" label="用户编号">
          <el-input
              placeholder="请输入用户编号"
              v-model="searchData.input1"
              size="small"
              clearable>
          </el-input>
        </el-form-item>
        <el-form-item class="text" label="用户名称">
          <el-input
              placeholder="请输入用户名称"
              v-model="searchData.input2"
              size="small"
              clearable>
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="addDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addDialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>



    <el-dialog
        title="编辑"
        :visible.sync="editDialogVisible"
        width="50%">
      <el-form :inline="true" :model="searchData">
        <el-form-item class="text" label="用户编号">
          <el-input
              placeholder="请输入用户编号"
              v-model="searchData.input1"
              size="small"
              clearable>
          </el-input>
        </el-form-item>
        <el-form-item class="text" label="用户名称">
          <el-input
              placeholder="请输入用户名称"
              v-model="searchData.input2"
              size="small"
              clearable>
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="editDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editDialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>


  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      searchData: {
        input1: "",
        input2: "",
      },
      tableData: [{
        id: '1',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: '2',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        id: '3',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        id: '4',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      },{
        id: '5',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      },{
        id: '6',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      currentPage: 1,
      addDialogVisible: false,
      editDialogVisible: false
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!');
    },
    onReset() {
      this.searchData.input1 = "";
      this.searchData.input2 = "";
    },
    handleAdd(){
      this.addDialogVisible=true;
    },
    refresh() {
      console.log("---")
      this.$NProgress.start();
      this.$NProgress.done()
    },
    handleEdit(index, row) {
      console.log(index, row);
      this.editDialogVisible=true;
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm('是否确认删除用户编号为"' + row.id + '"的数据项??', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  }
}
</script>
<!--公共样式-->
<style scoped lang="scss">

</style>